<template>
  <div class="select-seat-seatdemos-container">
    <view class="seatDemos">
      <template v-for="(seatTypeItem,index) in list" :key="index">
        <view
          class="seatDemo"
          v-if="seatTypeItem?.isShow === '1' && seatTypeItem.position === 'up'"
        >
          <image
            class="seatDemoItem"
            mode="widthFix"
            :src="seatTypeItem?.icon"
          ></image>
          <view class="seatDemoItem"> {{ seatTypeItem.name }}</view>
        </view>
      </template>
    </view>
  </div>
</template>
<script setup lang="ts">
import { toRefs } from "vue";

const props = defineProps({
  list: {
    type: Array<any>,
    required: true,
  },
});
const { list } = toRefs(props);
</script>
<style lang="scss">
.select-seat-seatdemos-container {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  /*
*座位样式的父级
*/

  .seatDemos {
    color: #aaa;
    //   background: #fff;
    position: relative;
    margin: 0 auto;
    width: 80%;
    box-sizing: border-box;
    font-size: 25rpx;
    height: 70rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .areaSeatDemos {
    width: 100%;
    height: 80rpx;
    position: fixed;
    bottom: 100rpx;
  }

  .seatDemosScroll {
    color: #aaa;
    background: #fff;
    width: 100%;
    height: 100%;
    font-size: 25rpx;
    white-space: nowrap;
  }

  .seatDemosScrollItem {
    height: 90rpx;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 15px;
    display: inline-block;
    align-items: center;
    margin-top: 25rpx;
  }

  .seatDemosScrollItem.Itemnormal image {
    margin-right: 10rpx;
    width: 40rpx;
    height: 40rpx;
    vertical-align: -30%;
  }

  /*
*情侣座位的图片样式
*/

  .seatDemosScrollItem.Itemlove image {
    margin: 0;
    width: 40rpx;
    height: 40rpx;
    vertical-align: -30%;
  }

  /*
*情侣座位的字体样式
*/

  .seatDemosScrollItem.Itemlove text {
    margin-left: 10rpx;
  }

  .seatDemo image {
    width: 45rpx;
    height: 45rpx;
  }

  /*
*普通座位的图片样式
*/

  .seatDemoItem {
    white-space: nowrap;
    width: 45rpx;
    display: block;
  }

  /*
*情侣座位的图片样式
*/

  .seatDemo {
    display: flex;
    align-items: center;
  }
}
</style>
